<template>
	<section id="page__cart">
		<header class="page__header">
			<h2 class="page__title">
				<i class="el-icon-s-goods"></i>
				<span>购物车</span>
			</h2>
		</header>
		<div class="page__main" v-loading="loading">
			<div class="operate-bar">
				<div class="bar-main">
					<el-alert
						v-if="showTips"
						title="已下架商品不能支付"
						type="warning"
						:show-icon="true"
						@close="closeTip"
					>
					</el-alert>
				</div>
				<div
					style="margin-left: 20px"
					class="bar-sub">
					<el-button
						type="primary"
						size="mini"
						:disabled="includeInvalid || selectList.length === 0"
						@click="batchPayCart"
					>
						付款
					</el-button>
					<el-button
						type="danger"
						size="mini"
						:disabled="selectList.length === 0"
						@click="batchDeleteCart"
					>
						删除
					</el-button>
				</div>
			</div>
			<el-table
				:data="cartList"
				style="width: 100%"
				@selection-change="handleSelectionChange"
			>
				<el-table-column
					type="selection"
					width="55">
				</el-table-column>
				<el-table-column
					prop="id"
					label="ID"
					width="70px"
				>
				</el-table-column>
				<el-table-column
					prop="goodsName"
					label="商品名称"
					:show-overflow-tooltip="true"
				>
				</el-table-column>
				<el-table-column
					prop="goodsCount"
					label="数量"
					:show-overflow-tooltip="true"
				>
				</el-table-column>
				<el-table-column
					prop="goodsPrice"
					label="价格"
					:show-overflow-tooltip="true"
				>
				</el-table-column>
				<el-table-column
					prop="createTime"
					label="添加时间"
					:show-overflow-tooltip="true"
				>
				</el-table-column>
				<el-table-column
					prop="updateTime"
					label="更新时间"
					:show-overflow-tooltip="true"
				>
				</el-table-column>
				<el-table-column
					prop="status"
					label="状态"
					width="65px"
				>
					<template slot-scope="prop">
						<span :class="[prop.row.status === GOODS_INVALID ? 'error' : '']">
							{{GOOD_STATUS_MAP[prop.row.status].sub || ''}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					width="90px"
				>
					<template slot-scope="prop">
						<el-button
							v-if="prop.row.status === GOODS_VALID"
							type="text"
							size="mini"
							@click="editCart(prop.row)"
						>
							编辑
						</el-button>
						<el-button
							type="text"
							size="mini"
							@click="deleteCart(prop.row)"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</section>
</template>

<script>
  /**
   *
   *
   *
   */
  import {mapState} from 'vuex'
  import * as CONSTANT from '../../config/constant'

  let tipCloseFlag = false
  export default {
    name: "index",
    data() {
      return {
        ...CONSTANT,
        loading: false,
        selectList: []
      }
    },
    computed: {
      ...mapState([
        'cartList'
      ]),
      includeInvalid() {
        let selectList = this.selectList
        return selectList.findIndex(item => item.status === CONSTANT.GOODS_INVALID) !== -1
      },
      showTips() {
        let includeInvalid = this.includeInvalid
        return includeInvalid && !tipCloseFlag
      }
    },
    // watch: {
    //   cartList() {
    //     this.$nextTick(() => {
    //       let tr = $('.goods-invalid')
    //       tr.find('.el-checkbox,.el-checkbox__input, .el-checkbox__input').addClass('is-disabled')
    //       tr.find('.el-checkbox__original').attr('disabled', true)
    //     })
    //   }
    // },
    async mounted() {
      this.loading = true
      await this.$store.dispatch('getCartList')
      this.loading = false
    },
    methods: {
      // computedRowClass({row, rowIndex}) {
      //   if (row.status === CONSTANT.GOODS_INVALID) {
      //     return 'goods-invalid'
      //   }
      // },
      closeTip() {
        tipCloseFlag = true
      },
      editCart(cart) {
        this.$router.push({
          path: '/goods/detail',
          query: {
            id: cart.goodsId,
            cartId: cart.id
          }
        })
      },
      deleteCart(cart) {
        this.$confirm('确认删除该商品?', '修改购物车', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.$axios.post('/cart/delete', {
                id: cart.id
              })
              .then(({success, message}) => {
                if (success) {
                  this.$message.success('删除成功')
                  this.$store.dispatch('getCartList')
                } else {
                  this.$message.error(message)
                }
              })
              .catch(({message}) => {
                this.$message.error(message)
              })
          })
      },
      handleSelectionChange(val) {
        this.selectList = val
      },
      batchPayCart() {
        let selectList = this.selectList,
          len = selectList.length
        if (len === 0) return false
        this.loading = true
        this.$axios.post('/order/add', {
            ids: selectList.map(item => item.id).join(',')
          })
          .then(({success, message, data}) => {
            if (success) {
              this.$router.push({
                path: '/order/detail',
                query: {
                  id: data
                }
              })
            } else {
              this.$message.error(message)
            }
          })
          .catch(({message}) => {
            this.$message.error(message)
          })
          .finally(() => {
            this.loading = false
          })
      },
      batchDeleteCart() {
        let selectList = this.selectList,
          len = selectList.length,
          firstGoods = selectList[0]
        if (len === 0) return false

        let message = `确认删除 ${firstGoods.goodsName} `
        if (len > 1) {
          message += `等${len}个商品`
        }
        message += '？'
        this.$confirm(message, '批量删除', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.loading = true
            this.$axios.post('/cart/batchDelete', {
                ids: selectList.map(item => item.id).join(',')
              })
              .then(({success, message}) => {
                if (success) {
                  this.$message.success('删除成功')
                  this.$store.dispatch('getCartList')
                } else {
                  this.$message.error(message)
                }
              })
              .catch(({message}) => {
                this.$message.error(message)
              })
              .finally(() => {
                this.loading = false
              })
          })
          .catch(() => {
          })
      }
    }
  }
</script>

<style lang='less'>
	#app.cart {
		.view__main {
			display: flex;
			flex-direction: column;
		}

		#page__cart {
			flex-shrink: 1;
			flex-grow: 1;

			.page__main {
				flex-grow: 1;
				flex-shrink: 1;
			}
		}
	}

	#page__cart {
		min-height: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.el-icon-s-goods {
			color: #409EFF;
		}
	}
</style>
